<template>
  <div id="auditDetailDialog">
    <el-dialog
      title="活动用户人群"
      :visible.sync="detailDialogData.isShow"
      width="700px"
    >
      <el-form label-width="80px">
        <el-form-item label="触达人群">
          <el-input
            disabled
            :value="detailData.groupType === 'ALL' ? '全站用户' : '用户人群'"
            class="detail-input"
          ></el-input>
          <span class="red-text" v-if="detailData.groupType === 'ALL' && isSms"
            >*本次触达将产生实际费用，预计费用为：4.52万元</span
          >
        </el-form-item>
        <el-form-item label="活动时间">
          <el-input
            disabled
            :value="detailData.startDate"
            class="detail-input"
          ></el-input>
          <span class="tips">至</span>
          <el-input
            disabled
            :value="detailData.endDate"
            class="detail-input"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="detailData.groupType === 'GROUP'">
          <div class="dialog-footer">
            <el-button
              v-for="(item, index) in detailData.selectGroup"
              :key="index"
              size="medium"
              type="primary"
            >
              {{ item.name }}
            </el-button>
          </div>
          <div
            class="sms-tips"
            v-if="isSms && detailData.groupType === 'GROUP'"
          >
            {{ smsMsg }}
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="detailDialogData.isShow = false"
          >确 定</el-button
        >
        <el-button @click="detailDialogData.isShow = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDetailAPI } from '@/api/operate/active'
import { getMoneyByGroupIdsAPI } from '@/api/userManagement/userManageAPI'
export default {
  props: {
    detailDialogData: {
      type: Object,
      default: () => {
        return {
          isShow: false,
          id: ''
        }
      }
    }
  },
  data() {
    return {
      detailData: {},
      isSms: false,
      selectGroup: [],
      smsMsg: '加载中。。。'
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let id = this.detailDialogData.id
      getDetailAPI(
        id,
        (response) => {
          this.detailData = response
          this.selectGroup = this.detailData.selectGroup
          let touchType = this.detailData.touchType
          if (touchType.includes('SMS')) {
            this.isSms = true
          }
          if (this.isSms && this.detailData.groupType === 'GROUP') {
            this.getMoneyByGroupIds()
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    getMoneyByGroupIds() {
      if (this.selectedPeople.length > 0) {
        this.smsMsg = '加载中。。。'
        let ids = []
        this.selectedPeople.map((item) => {
          ids.push(item.id)
        })
        let params = {
          ids: ids.join(',')
        }
        getMoneyByGroupIdsAPI(
          params,
          (response) => {
            this.smsMsg = response.msg
          },
          (response) => {
            this.$message.error(response.message)
          }
        )
      } else {
        this.smsMsg = '*本次触达将产生实际费用，预计费用为：0元；'
      }
    }
  }
}
</script>
<style lang="less" scoped>
@peopleBackground: #1dc8a4;
#auditDetailDialog {
  .detail-input {
    width: 200px;
  }
  .tips {
    margin: 0 10px;
  }
  .people {
    width: 700px;
  }
  .dialog-footer {
    margin-bottom: 20px;
  }
  .red-text {
    color: red;
    margin-left: 5px;
  }
  .sms-tips {
    color: red;
    margin-top: 10px;
  }
}
</style>
